<template>
    <div class="login_mask_layer">
        <div class="login_register_box">
            <!--      登录-->
            <div class="login_register_content" v-if="loginRegister.kind" @keyup.enter="login">
                <p>登录</p>
                <div class="login_print">
                    <label class="login_auto" @click="shrink_auto=true">
                        <span class="login_info" :class="{'shrink':shrink_auto || logInfo.auto }">账号:</span>
                        <input type="text" @blur="shrink_auto=false" v-model.trim="logInfo.auto">
                    </label>
                    <label class="login_password" @click="shrink_password=true" @blur="shrink_password=false">
                        <span class="login_info" :class="{'shrink':shrink_password || logInfo.password}">密码:</span>
                        <input type="text" @blur="shrink_password=false" v-model.trim="logInfo.password">
                    </label>
                    <label class="login_password" @click="shrink_captcha=true" @blur="shrink_captcha=false">
                        <span class="login_info" :class="{'shrink':shrink_captcha || logInfo.captcha}">验证码:</span>
                        <input type="text" @blur="shrink_captcha=false" v-model.trim="logInfo.captcha">
                        <span class="login_captcha" @click="shrink_captcha = (logInfo.captcha!=='' ? true: false)">
                        <span v-for="(item,index) in randomCaptcha.captcha.split('')" :key="index">{{ item }}</span>
                        </span>

                    </label>
                </div>
                <div class="login_but">
                    <button @click="login" :disabled="disable" @keyup.enter="login">登录</button>
                    <button style="background: #e7986d" @click="handoff(false)">去注册</button>
                </div>


                <!--      窗口关闭-->
                <span class="login_display" @click="shutDown">X</span>
                <span class="login_tips">提示：注册时的邮箱即为账号登录</span>
            </div>


            <!--      注册-->
            <div class="login_register_content" v-else @keyup.enter="registerInfo">
                <p>注册</p>
                <div class="login_print">
                    <label class="login_auto" @click="shrink_auto=true">
                        <span class="login_info" :class="{'shrink':shrink_auto || registerInfo.email }">QQ邮箱:</span>
                        <input type="text" @blur="shrink_auto=false" v-model.trim="registerInfo.email">
                    </label>
                    <label class="login_password" @click="shrink_password=true" @blur="shrink_password=false">
                        <span class="login_info"
                              :class="{'shrink':shrink_password || registerInfo.password}">密码:</span>
                        <input type="password" @blur="shrink_password=false" v-model.trim="registerInfo.password">
                    </label>
                    <label class="login_password" @click="shrink_captcha=true" @blur="shrink_captcha=false">
                        <span class="login_info"
                              :class="{'shrink':shrink_captcha || registerInfo.captcha!==''}">验证码:{{registerInfo.captcha}}</span>
                        <input type="text" @blur="shrink_captcha=false" v-model.trim="registerInfo.captcha">
                        <button class="login_captcha_send" @click="getCaptcha" :disabled="captchaDisable">
                            {{ captchaMsg }}
                        </button>
                    </label>
                </div>
                <div class="login_but">
                    <button style="background: #e7986d" @click="handoff(true)">去登录</button>
                    <button @click="register" :disabled="disable">提交</button>
                </div>

                <!--      窗口关闭-->
                <span class="login_display" @click="shutDown">X</span>
            </div>

        </div>
    </div>


</template>
<!--登录注册-->
<script setup>
import {computed, onMounted, ref} from "vue";
import store from "@/store/index.js";
import api from "@/request/index.js";
//emit事件
const emit = defineEmits(['shutDown', 'handoff'])

//显示登录或注册
const loginRegister = defineProps({
    kind: {
        type: Boolean,
        default: true
    }
});

//组件控制
const handoff = (bool) => {
    emit('handoff', bool);
    for (let k in logInfo.value) {
        logInfo.value[k] = '';
    }
    for (let k in registerInfo.value) {
        logInfo.value[k] = '';
    }
};

//随机生成验证码
const randomCaptcha = ref({
    captcha: "",
    captchaId: "",
});


// 是否正在进行账号、密码、验证码输入
const shrink_auto = ref(false);
const shrink_password = ref(false);
const shrink_captcha = ref(false);

//禁用按钮
const disable = ref(false);

//防止重复发生验证码
const captchaDisable = ref(false);
const captchaMsg = ref("获取验证码"); //x信息
const captchaTime = ref(59);//時間
const captchaTimer = ref(null); //定時器

//登录提交的信息
const logInfo = ref({
    auto: "",
    password: "",
    captcha: "",
    captchaId: "",
});

//注册提交的信息
const registerInfo = ref({
    email: "",
    password: "",
    username: "",
    captcha: "",
});

//登录
const login = () => {
    disable.value = true;
    setTimeout(() => {
        disable.value = false;
    }, 3000);

    let pattern = /^[1-9]\d{4,10}@qq\.com$/;
    let email_s = pattern.test(logInfo.value.auto);//正确返回真
    if (!email_s) {
        store.commit('info_sub', {msg: "邮箱格式不正确!", type: "warn"});
        return;
    }
    if (!logInfo.value.password || !logInfo.value.captcha || !logInfo.value.auto) {
        store.commit('info_sub', {msg: "请将信息填写完整!", type: "warn"});
        return;
    }

    if (logInfo.value.captcha !== randomCaptcha.value.captcha) {
        store.commit('info_sub', {msg: "验证码错误!", type: "warn"});
        return;
    }
    logInfo.value.captchaId = randomCaptcha.value.captchaId;
    api.login(logInfo.value).then((res) => {
        if (res.data.code === 200) {
            store.commit('user', res.data.data.info);
            window.localStorage.setItem("user", JSON.stringify(res.data.data.info))
            window.localStorage.setItem("AUTHORIZATION_TOKEN", res.data.data.token)
            store.commit('info_sub', {msg: "登录成功", type: "normal"});
            shutDown();
        } else {
            api.getCaptcha().then((res) => {
                randomCaptcha.value = res.data.data;
            })
            store.commit('info_sub', {msg: res.data.msg, type: "error"});
        }
    })

};

// 注册
const register = () => {
    disable.value = true;
    setTimeout(() => {
        disable.value = false;
    }, 3000);
    for (let k in registerInfo.value) {
        if (!registerInfo.value[k]) {
            store.commit('info_sub', {msg: "请将信息填写完整!", type: "warn"});
        }
    }

    let pattern = /^[1-9]\d{4,10}@qq\.com$/;
    let email_s = pattern.test(registerInfo.value.email);

    if (email_s) {
        store.commit('info_sub', {msg: "邮箱格式不正确!", type: "warn"});
        return;
    }


    api.enroll(registerInfo.value).then((res) => {
        if (res.data.code === 200) {
            store.commit('info_sub', {msg: "注册成功!", type: "warn"});
        } else {
            store.commit('info_sub', {msg: res.data.msg, type: "error"});
        }
    })
}

//关闭窗口
const shutDown = () => {
    emit('shutDown', false);
}

//发送注册验证码
const getCaptcha = () => {
    if (!registerInfo.value.email) {
        store.commit('info_sub', {msg: "请填写QQ邮箱!", type: "warn"});
        setTimeout(()=>{
            shrink_captcha.value =false;
        },10)
        return;
    }
    let pattern = /^[1-9]\d{4,10}@qq\.com$/;
    let email_s = pattern.test(registerInfo.value.email);//正确返回真
    if (!email_s) {
        store.commit('info_sub', {msg: "邮箱格式不正确!", type: "warn"});
        return;
    }
    captchaDisable.value = true;
    captchaMsg.value = '59s';
    captchaTimer.value = setInterval(() => {
        if (captchaTime.value === 0) {
            captchaTime.value = 59;
            clearInterval(captchaTimer.value);
            captchaMsg.value = "获取验证码";
            captchaDisable.value = false;
            return;
        }
        captchaTime.value -= 1;
        captchaMsg.value = captchaTime.value + 's';
    }, 1000);

    api.enrollCaptcha(registerInfo.value.email).then((res) => {
        if (res.data.code === 200) {
            store.commit('info_sub', {msg: "验证码已发送至邮箱，请注意查看", type: "warn"});
        } else {
            store.commit('info_sub', {msg: res.data.msg, type: "error"});
        }

    })
}

onMounted(() => {
    api.getCaptcha().then((res) => {
        randomCaptcha.value = res.data.data;
        console.log(res.data)
    })
})

</script>

<style scoped>
.login_mask_layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.login_register_box {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 300px;
    transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    overflow: hidden;
    padding: 5px;
    border-radius: 2px;
    background: white;
    box-shadow: 0 0 3px rgba(96, 97, 98);
    animation: openIt .5s ease-in 0s 1 forwards;
}

.login_register_content {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: #fafbfc;
    padding: 5px 0 15px;
}

.login_register_content p {
    text-align: center;
    font-size: 22px;
    height: 50px;
    padding-top: 5px;
    line-height: 50px;
    font-weight: bolder;
    color: #6da6e1;
}

.login_print {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 20px;
    justify-content: center;
}

.login_print label {
    position: relative;
    width: 200px;
    margin: auto;
}

.login_print input {
    width: 100%;
    text-indent: 8px;
    height: 35px;
    border: 1px solid #6da6e1;
    border-radius: 3px;
    outline: none;
}

.login_info {
    position: absolute;
    top: 50%;
    left: 5px;
    font-size: 14px;
    color: #606162;
    transition: all .5s;
    z-index: 99;
    background: white;
    transform: translateY(-50%);
}

.shrink {
    top: -2px;
}

.login_but {
    width: 125px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
}

button {
    padding: 5px 8px;
    border: 0;
    border-radius: 2px;
    background: #6da6e1;
    color: white;
}

button:hover {
    opacity: .8;
    cursor: pointer;
}

.login_display {
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    color: white;
    background: #6da6e1;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    padding-left: 1px;
    padding-bottom: 2px;
}

.login_display:hover {
    opacity: .8;
    cursor: pointer;
}

.login_tips {
    position: absolute;
    top: 2px;
    left: 3px;
    color: #212121;
    font-size: 12px;
}

.login_captcha {
    position: absolute;
    top: 50%;
    right: 0;
    height: 100%;
    background: rgba(96, 97, 98, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 3px;
    width: 80px;
    transform: translateY(-50%);
}

.login_captcha_send {
    position: absolute;
    top: 50%;
    right: 0;
    height: 100%;
    background: rgb(109, 166, 225);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 3px;
    width: 80px;
    font-size: 12px;
    cursor: pointer;
    color: white;
    z-index: 9;
    transform: translateY(-50%);
}

.login_register_box:after, .login_register_box:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 60px;
    content: "";
    transform-origin: left center;
    transform: translateY(-50%);
    background: #6da6e1;
    z-index: -1;
    animation: revolve_l 5s linear 0.2s infinite;
}

.login_register_box:before {
    left: initial;
    right: 50%;
    transform-origin: right center;
}

@keyframes revolve_l {
    0% {
        transform: rotateZ(0);
    }
    1% {
        transform: rotateZ(0) scale(1);
    }
    100% {
        transform: rotateZ(360deg);
    }
}


@keyframes openIt {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(0);
    }
    30% {
        transform: translateX(-50%) translateY(-50%) scale(1.05);
    }
    50% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
    80% {
        transform: translateX(-50%) translateY(-50%) scale(1.02);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}
</style>